<template lang="html">
  <div id="rentList-wrap">
      <section class="rentList-header">
        <div class="header-fixed">
          <div class="header-search pad-side-15">
            <search-input class="search-input" placeholder="请输入小区/商圈" link="/search" :defaultVal="defaultVal"></search-input>
            <i class="icon icon-map" @click="$router.push('/map')"></i>
          </div>
          <filter-bar @filterSubmit="getFilterData"></filter-bar>
        </div>
      </section>
      <main class="main" v-if="houseList.length !== 0">
        <house-list v-for="(data, index) in houseList" :key="index" v-if="data" :houseInfo="data" detailPath="/detail"></house-list>
      </main>
      <div class="sort" @click="getOrders">
        <i class="icon icon-sort"></i>
        <span>排序</span>
      </div>
      <div class="load-more">
        <p v-if="houseList.length === 0">没有符合筛选条件数据</p>
        <p v-else-if="houseList.length > 0 && noMore">没有更多数据了</p>
        <p v-else-if="houseList.length !==0 && !noMore" @click="loadMore">加载更多>></p>
      </div>
      <transition name="fade">
        <div class="sort-selector" v-if="showSort" @click="showSort=false" @touchmove.prevent="">
          <ul class="sort-container">
            <li class="sort-item" :class="{active: order.code === sortCode}" v-for="order in orders" :key="order.code" @click="getOrderData(order)">{{order.value}}</li>
          </ul>
        </div>
      </transition>
  </div>
</template>

<script>
import SearchInput from './child/SearchInput'
import houseList from '@/components/houseList'
import FilterBar from './child/FilterBar'
export default {
  components: {
    SearchInput,
    houseList,
    FilterBar
  },
  data () {
    return {
      defaultVal: '',
      page: 1,
      pageSize: 10,
      showSort: false,
      sortCode: 'PX_1001',
      orders: [], // 排序数据
      houseList: [], // 房源列表
      filterData: {}, // 筛选条件
      noMore: false // 无更多数据
    }
  },
  created () {
    window.onunload = function () {
      window.localStorage.setItem('personalHouses', '[]')
      window.localStorage.setItem('personalPage', '1')
      window.localStorage.setItem('rentNoMore', '')
    }
    let communityName = this.$route.query.communityName
    this.defaultVal = communityName
    let filterData = JSON.parse(window.localStorage.getItem('filterData') || '{}')
    this.sortCode = window.localStorage.getItem('PX_CODE') || 'PX_1001'
    let filter = {
      isFreebet: filterData.isFreebet || '',
      betNum: filterData.betNum || '',
      region: filterData.region || '',
      layoutRoom: filterData.layoutRoom || '',
      layoutToilet: filterData.layoutToilet || '',
      area: filterData.area || '',
      rentalPrice: filterData.rentalPrice || '',
      direct: filterData.direct || '',
      highlights: filterData.highlights || '',
      floor: filterData.floor || '',
      decoration: filterData.decoration || '',
      isLift: filterData.isLift || ''
    }
    this.noMore = JSON.parse(window.localStorage.getItem('rentNoMore') || 'false')
    this.filterData = filter
    let houseList = JSON.parse(window.localStorage.getItem('personalHouses') || '[]')
    let page = parseInt(window.localStorage.getItem('personalPage') || '1')
    this.page = page
    let data = {page: this.page, pageSize: this.pageSize}
    if (houseList.length > 0) {
      this.houseList = houseList
      this.$nextTick(() => {
        document.body.scrollTop = Number(window.localStorage.getItem('rentList-top') || 0)
      })
    } else {
      if (communityName !== undefined && communityName !== '') {
        this.getHouseList({...data, communityName, ...filter})
      } else {
        this.getHouseList({...data, ...filter})
      }
    }
  },
  methods: {
    getFilterData (data) {
      this.filterData = Object.assign({}, data)
      this.page = 1
      this.getHouseList({...data, page: this.page, pageSize: this.pageSize, order: this.sortCode})
    },
    // 列表加载
    getHouseList (data, showTotal = true) {
      this.$vux.toast.hide()
      this.$axiosPosting(this.$api.getHousePersonsList, data).then(res => {
        if (res.code === '0000') {
          if (data.page === 1) {
            document.body.scrollTop = 0
            if (showTotal && res.data.total) this.$vux.toast.text(`共找到${res.data.total}套房源`)
          }
          window.localStorage.setItem('rentNoMore', this.noMore)
          this.page === 1 ? this.houseList = res.data.houseList : this.houseList = this.houseList.concat(res.data.houseList)
          this.noMore = this.houseList.length >= res.data.total
          window.localStorage.setItem('personalHouses', JSON.stringify(this.houseList))
          window.localStorage.setItem('personalPage', this.page)
          if (res.data.houseList.length === 0) {
            this.$vux.toast.text(`暂无数据`)
            this.noMore = true
          }
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    getOrderData (order) {
      this.sortCode = order.code
      this.page = 1
      window.localStorage.setItem('PX_CODE', order.code)
      this.getHouseList({...this.filterData, page: this.page, pageSize: this.pageSize, order: this.sortCode})
    },
    loadMore () {
      this.page = this.page + 1
      this.getHouseList({...this.filterData, page: this.page, pageSize: this.pageSize, order: this.sortCode})
    },
    // 获取排序的数据
    getOrders () {
      var orders = JSON.parse(window.localStorage.getItem('PX') || '[]')
      if (orders.length <= 0) {
        this.$axiosPosting(this.$api.getHouseAttributeByCodeType, {codeType: 'PX'}).then(res => {
          if (res.code === '0000') {
            this.orders = res.data
            window.localStorage.setItem('PX', JSON.stringify(res.data))
          } else {
            this.orders = []
            window.localStorage.setItem('PX', '[]')
          }
          this.showSort = true
        })
      } else {
        this.orders = orders
        this.showSort = true
      }
    }
  },
  beforeRouteLeave (to, from, next) {
    window.localStorage.setItem('rentList-top', document.body.scrollTop)
    if (to.name !== 'detail') {
      window.localStorage.setItem('filterData', '')
      window.localStorage.setItem('rentNoMore', '')
      window.localStorage.setItem('PX_CODE', '')
      window.localStorage.setItem('personalHouses', '')
      window.localStorage.setItem('personalPage', '1')
    }
    next()
  },
  beforeDestroy () {
    this.$vux.toast.hide()
    window.onunload = undefined
  }
}
</script>

<style lang="less" scoped>
  @import "../../styles/baseVar.less";

  .pad-side-15{
    padding: 0 15px; /* 20/40 */
    box-sizing: border-box;
  }
  #rentList-wrap{
    min-height: 100vh;
    section{
      // margin-bottom: 8px; /* 16/40 */
      border-bottom: 1px solid #f4f4f4;
      background: #fff;
    }
    .icon{
      display: inline-block;
    }
    .icon-map{
      width: 16px;
      height: 24px;
      background: url('../../images/rent/rent_map.png') center no-repeat;
      background-size: 100%;
      margin-left: 20px;
    }
    .rentList-header{
      height: 104px; /* 140/40 */
      border: none;
    }
    .header-fixed{
      position: fixed;
      top: 0;
      width: 100%;
      background: #fff;
      z-index: 100;
      border: 1px solid #f4f4f4;
    }
    .header-search{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding-top: 18px;
      height: 48px; /* 80/40 */
      box-sizing: border-box;
    }
    .search-input{
      flex: 1;
    }
    .main{
      background: #fff;
      min-height: ~"calc(100vh - 104px - 42px)";
      .ui-house-li{
        border-bottom: 1px solid #f4f4f4;
      }
    }
    .sort{
      position: fixed;
      right: 15px;
      bottom: 52px;
      width: 78px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 12px;
      border-radius: 15px;
      color: #fff;
      background: #ff9600;
      z-index: 10;
      .icon-sort{
        width: 14px;
        height: 13px;
        vertical-align: sub;
        background: url('../../images/rent/rent_sort.png') center no-repeat;
        background-size: cover;
      }
    }
    .sort-selector{
      position: fixed;
      z-index: 100;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, .5);
      text-align: center;
      font-size: 14px;
      line-height: 40px;
      color: #777;
      .sort-container{
        padding: 10px 0;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        .sort-item{
          position: relative;
          &.active{
            color: #ff9600;
            &:after{
              content: '';
              position: absolute;
              left: 0;
              right: 0;
              margin: auto;
              bottom: 0;
              width: 30px;
              height: 2px;
              background: #ff9600;
            }
          }
        }
      }
    }
    .load-more{
      font-size: 15px;
      text-align: center;
      color:#ff9600;
      height: 50px;
      line-height: 50px;
      background: #fff;
    }
  }
</style>
